<template>
  <div class="dashboard-container" >
    顾客信息管理
    <el-dialog
      title="新增"
      :visible.sync="addButtonController"
      width="30%"
      @close="close('ruleForm')">

      <el-form label-width="20%" :model="addList" ref="ruleForm">
        <el-form-item label="订单ID" prop="liveId">
          <el-input v-model="addList.liveId" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入订单ID"/>
        </el-form-item>
        <el-form-item label="顾客ID" prop="customerId">
          <el-input v-model="addList.customerId" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入顾客ID"/>
        </el-form-item>
        <el-form-item label="顾客名称" prop="customerName">
          <el-input v-model="addList.customerName" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入顾客名称"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="identificationCard">
          <el-input v-model="addList.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="房间ID" prop="roomId">
          <el-input v-model="addList.roomId" maxlength="50" show-word-limit style="width: 80%" clearable placeholder="请输入房间ID"/>
        </el-form-item>
        <el-form-item label="房间号" prop="roomNumber">
          <el-input v-model="addList.roomNumber" maxlength="50" show-word-limit style="width: 80%" clearable placeholder="请输入房间号"/>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="add('ruleForm')">确定</el-button>
        <el-button  @click="close('ruleForm')">取消</el-button>
      </span>
    </el-dialog>


    <el-input
      v-model="roomNumber"
      placeholder="房间号"
      name="roomNumber"
      type="text" clearable
      style="margin-left: 40px;width: 180px"/>
    <el-input
      v-model="customerName"
      placeholder="顾客名称"
      name="customerName"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />
    <el-input
      v-model="identificationCard"
      placeholder="身份证号"
      name="identificationCard"
      type="text" clearable
      style="margin-left: 40px;width: 180px"/>


    <el-button  type="primary" style="margin-left: 40px;width: 100px" @click="selectLiveRecords">查询</el-button>
    <el-button  style="margin-left: 40px;width: 100px" @click="checkCustomer">重置</el-button>


    <el-table :data="customerList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="535px" border style="width: 100%;margin-top:20px">
      <el-table-column align="center" fixed prop="liveId" sortable label="订单ID"/>
      <el-table-column align="center" fixed prop="customerId" sortable label="顾客ID"/>
      <el-table-column align="center" fixed prop="customerName" sortable label="顾客名称"/>
      <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
      <el-table-column align="center" fixed prop="roomId" sortable label="房间ID"/>
      <el-table-column align="center" fixed prop="roomNumber" sortable label="房间号"/>
    </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="customerList.length">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {deleteCustomer, insertCustomer, selectAllCustomer, updateCustomer} from "@/api/Customer";
import {selectAllLiveRecords} from "@/api/liveRecords";

export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      currentPage: 1,
      currentIndex: '',
      pagesize: 10,

      customerName: '',
      identificationCard: '',
      customerId:'',
      roomNumber:'',
      customerList:[],
      addButtonController: false,
      addList: {
        liveId:'',
        customerId:'',
        customerName:'',
        identificationCard: '',
        roomId:'',
        roomNumber:'',
      },

    }
  },


  // 页面初始化时加载的方法
  mounted() {
    this.selectLiveRecords()
  },
  // 页面的方法和事件
  methods:{
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },

    selectLiveRecords(){
      this.currentPage = 1
      selectAllLiveRecords({
        customerName:this.customerName,
        identificationCard:this.identificationCard,
        roomNumber:this.roomNumber
      }).then(
        response => {
          console.log(response)
          this.customerList=response.data
          console.log(this.customerList)
        }
      )
    },
    checkCustomer(){
      this.customerName=''
      this.identificationCard =''
      this.roomNumber=''
      this.selectCustomer()
    },


    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertCustomer({
            liveId:this.addList.liveId,
            customerId:this.addList.customerId,
            customerName:this.addList.customerName,
            identificationCard:this.addList.identificationCard,
            roomId:this.addList.roomId,
            roomNumber:this.addList.roomNumber,
          }).then(
            response => {
              this.addButtonController = false
              this.$message.success("新增成功！");
              this.selectCustomer()
            }
          )
        } else {return false;}});},
    close(formName){
      this.$refs[formName].resetFields();
      this.addButtonController =false
    },


  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
